extends ../layout

block navbar
	include ../navbar

block content
	style(scoped).
		.main { padding: 10px 20px 0; }
		.article .date {
			margin-bottom: 16px;
		}
		.comments {
			margin-top: 20px;
			padding-top: 20px;
			border-top: 1px solid #e5e5e5;
		}
		.comments .comment {
			list-style: none;
			padding: 10px 20px;
			margin: 0 0 20px;
			border-left: 5px solid #eee;
		}
		.comment .date {
			float: right;
		}
		#comment {
			margin-top: 20px;
		}
		#comment [name="body"] {
			height: 70px;
			width: 50%;
		}
		@media (max-width: 480px) {
			#comment [name="body"] { width: 100%; }
		}

	.main
		.pure-g-r
			.pure-u-1-8
			.pure-u-3-4
				.article
					h1= post.title
					.date.moment(data-date=post.date.toJSON())
					.body= post.body

				ul.comments
					each comment in post.comments
						li.comment(data-id=comment._id)
							.pure-g-r
								.pure-u-1-2
									.name= comment.name + ' :'
								.pure-u-1-2
									.date.moment(data-date=comment.date.toJSON())
								.pure-u-1
									blockquote= comment.body

				form#comment.pure-form.pure-form-aligned(method='post', action='/api/posts/'+post._id+'/comments')
					.fieldset
						legend Comment
						.pure-control-group
							label Name
							input(type='text', name='name')
						.pure-control-group
							label Content
							textarea(name='body')
						input.pure-button.pure-button-primary(type='submit')
			.pure-u-1-8
